<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 480px;
      height: 270px;
      margin: 150px auto;
      position: relative;
      font-size: 0;
      overflow: hidden;
    }

    .container img {
      width: 20%;
    }

    .container .next,
    .container .prev {
      position: absolute;
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.8);
      top: 105px;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
    }

    .container .next {
      right: 0;
    }

    body {
      background: radial-gradient(#fef, #38c);
      /* 1vw 等于视口宽度的 1% */
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 定义一个类名, 样式为隐藏 透明图为0 */
    .container .hidden {
      /* opacity: 0; */
      /* left: 480px; */
      top: 270px;
      /* left: -480px; */
      transform: rotate(360deg);
    }

    ul {
      list-style: none;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

    ul li {
      width: 12px;
      height: 12px;
      background: #eee2e2;
      float: left;
      margin-right: 10px;
      border-radius: 50%;
    }

    ul li.active {
      background: #c92525;
    }

    .img-wrapper{
      width: 500%;
      position: absolute;
      left: 0;
      top: 0;
      transition: all 0.5s;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="img-wrapper">
      <img width="100%" src="./images/1.jpg" alt="">
      <img width="100%" src="./images/2.jpg" alt="">
      <img width="100%" src="./images/3.jpg" alt="">
      <img width="100%" src="./images/4.jpg" alt="">
      <img width="100%" src="./images/5.jpg" alt="">
    </div>

    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <div class="next">&gt;</div>
    <div class="prev">&lt;</div>
  </div>

  <script>
    //获取 container 容器元素
    let container = document.querySelector('.container');
    //获取 img-wrapper 元素
    let imgWrapper = document.querySelector('.img-wrapper');
    //获取上一个和下一个的按钮
    let next = document.querySelector('.next');
    let prev = document.querySelector('.prev');
    //获取所有的图片
    let images = document.querySelectorAll('img');
    //获取所有的小圆点元素
    let dots = document.querySelectorAll('li');
    //当前显示图片的下标   游标
    let index = 0;
    //声明 timer 变量
    let timer;

    //绑定事件
    next.onclick = function () {
      //使 index 自增
      index++;
      //添加边界检测
      if (index > images.length - 1) {
        index = 0;
      }
      showSlide(index);
    }

    //点击上一个的按钮事件
    prev.onclick = function () {
      //使 index 变量自减
      index--;
      //边界检测
      if (index < 0) {
        index = images.length - 1;
      }
      showSlide(index);
    }

    //为 container 元素绑定 onmouseover 事件
    container.onmouseover = function () {
      //停止定时器
      clearInterval(timer);
    }

    //为 container 元素绑定 mouseout 事件
    container.onmouseout = function () {
      autoRun();
    }

    //为每一个小圆点绑定鼠标移入事件
    for (let i = 0; i < dots.length; i++) {
      dots[i].onmouseover = function () {
        //切换显示的图片下标
        showSlide(i);
      }
    }

    //封装函数, 自动运行
    function autoRun() {
      //启动定时器
      timer = setInterval(() => {
        //下标 index 自增
        index++;
        //判断是否越界
        if (index > images.length - 1) {
          index = 0;
        }
        //切换图片显示
        showSlide(index);
      }, 2000);
    }
    autoRun();

    //封装一个函数 显示指定下标的图片   标识符要尽量做到见名思义
    function showSlide(ind) {
      /**
       * ind    left
       * 0       0
       * 1       -480px
       * 2       -960px
       * n       -480 * n
       */
      //计算当前下标对应的 left 值
      let newLeft = ind * -480;
      //设置wrapper 元素的 left 样式
      imgWrapper.style.left = newLeft + 'px';
      //所有的店都变成灰色
      for (let i = 0; i < dots.length; i++) {
        dots[i].className = '';
      }
      //将当前index对应的小圆点变成红色
      dots[ind].className = 'active';
    }

  </script>
</body>

</html>